<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: yellow;
            /* transition: background 3s; */
            /* transition: background 3s,width 3s; */
            /* transition: all 3s; */
            transition:all 3s ease;
            transition: all 3s linear;
            transition: all 3s ease-in;
            transition: all 3s ease-out;
            transition: all 3s ease-in-out;
            transition: all 3s ease-in-out 2s;
        }
        #box:hover{
            width: 546px;
            height: 345px;
            background: red;
        }
        .big{
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid;
            position: relative;
        }
        .small{
            width: 0%;
            height: 50px;
            background: yellow;
            position: absolute;
            transition: width .5s;
        }
        .big:hover > .small{
            width: 100%;
        }
        .big span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <!-- 
        css3 新增属性
        1. 平滑过渡
            transition:过渡的属性 持续时间 [速率] [延迟时间]
        2. 过渡的属性
            单一属性过渡
            transition:过渡的属性 持续时间 [速率] [延迟时间]
            多个属性过渡
            transition:过渡的属性 持续时间 [速率] [延迟时间],过渡的属性 持续时间 [速率] [延迟时间],...
            过渡所有属性(有多少发生改变,就过渡多少属性)
            transition:all 持续时间 [速率] [延迟时间];
        3. 速度
            ease            默认,逐渐变慢
            linear          匀速
            ease-in         加速
            ease-out        减速
            ease-in-out     先加速,再减速
            cubic-bezier()  自定义速度,建议通过F12调试
        4. 延迟
            单位:s或ms
            过渡不会立马触发,而是等待延迟时间过了,才会触发过渡
        5. 重点
            过渡只能过渡能够加减的属性
            例如:widht height color opacity等
            以下属性是无法过渡的 例如:display,visibility
     -->
    <div id="box"></div>
    <div class="big">
        <div class="small"></div>
        <span>在线客服</span>
    </div>
</body>
</html>